﻿// Control is a visual component that can have other children components but that are conceptually part of it 
// When highlighted or selected it behaves like a single component (all children components are highlighted or visually selected)
define([
    'Xjs/core/util',
    'Xjs/ui/View',
    'Xjs/core/Interactive',
    'Xjs/ui/Content', // Include the content module in case the control has a content component
    'Xjs/ui/tool/Tooltip' // Include the tooltip module in case the control has a tooltip
],
function (util, View, Interactive) {
    'use strict';

    var type = 'control',
    Control = Xjs.getType(type);

    if (Control) { // It has been already loaded
        return Control;
    }

    // A control is a composite of content and a tooltip, although is a composite so it can have any children
    Control = util.define({
        base: View,
        mixins: [
            Interactive
        ],
        construct: function (conf, parent) {

            conf = conf || {};

            Control.base.constructor.call(this, conf, parent);

//            if (conf.label) {

//                if (this.content) {
//                    console.log('Warning! Component: ' + this.toString() + ' already has content ... skipping creating a label');
//                }
//                else {

//                    this.content = Xjs.create('content', {
//                        content: conf.label
//                    }, this);

//                    if (conf.contentIncluded || this.contentIncluded) {
//                        this.addChild(this.content);
//                    }
//                }
//            }

            Interactive.prototype.initialize.call(this, conf);

            this.createTooltip(conf);
        },

        type: type,
        defaultChildType: type, // 'control'

        // The html tag used by the builder to create the markup
        tag: 'div',

        // The default class for the control, if not provided, it defaults to the type of the control
        cls: null,

        isControl: function () {
            return true;
        },

        createTooltip: function (conf) {

            conf = conf || {};

            if (conf.tooltip) {
                // Create a tooltip
                var tooltip;
                if (util.isString(conf.tooltip)) {
                    tooltip = Xjs.create('tooltip', {
                        content: conf.tooltip
                    }, this);
                }
                else {
                    tooltip = Xjs.create('tooltip', conf.tooltip, this);
                }

                this.addChild(tooltip);
                this.tooltip = tooltip;

                this.ensureId();
            }
        },

        // Populates all the content of the children components with declared binders from the data
        valueFrom: function (data) {

            if (this.children) {
                this.children.forEach(function (child) {
                    child.valueFrom(data);
                });
            }
        },

        // Populates the data from all the content of the children components with declared binders
        valueTo: function (data) {

            if (this.children) {
                this.children.forEach(function (child) {
                    child.valueTo(data);
                });
            }
        }

    });

    Xjs.registerType(Control);

    return Control;
});